from os.path import basename

from transformers import is_timm_available

BANNER = '''\
<h1>DeTi<i>k</i>Zify: Synthesizing Graphics Programs for Scientific Figures and Sketches with Ti<i>k</i>Z</h1>

<p>
  <a style="display:inline-block" href="https://arxiv.org/abs/2405.15306">
    <img src="https://img.shields.io/badge/View%20on%20arXiv-B31B1B?logo=arxiv&labelColor=gray" alt="View on arXiv">
  </a>
  <a style="display:inline-block" href="https://github.com/potamides/DeTikZify">
    <img src="https://img.shields.io/badge/View%20on%20GitHub-green?logo=github&labelColor=gray" alt="View on GitHub">
  </a>
  <a style="display:inline-block" href="https://huggingface.co/collections/nllg/detikzify-664460c521aa7c2880095a8b">
    <img src="https://img.shields.io/badge/View%20on%20Hugging%20Face-blue?labelColor=gray&logo=" alt="View on Hugging Face">
  </a>
  <a style="display:inline-block" href="https://colab.research.google.com/drive/1hPWqucbPGTavNlYvOBvSNBAwdcPZKe8F">
    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab">
  </a>
</p>
'''

MODELS = {
    basename(model): model
    for model in [
        "nllg/detikzify-v2-8b",
        #"nllg/detikzify-v2-3b", # coming soon
    ]
}

if is_timm_available():
    MODELS |= {
        basename(model).replace("detikzify", "detikzify-v1"): model
        for model in [
            "nllg/detikzify-ds-7b",
            "nllg/detikzify-cl-7b",
            "nllg/detikzify-ds-1.3b",
            "nllg/detikzify-tl-1.1b",
        ]
    }

ALGORITHMS = {
    "mcts": "MCTS",
    "sampling": "Sampling"
}

# https://github.com/gradio-app/gradio/issues/3202#issuecomment-1741571240
# https://github.com/gradio-app/gradio/issues/2666#issuecomment-1651127149
# https://stackoverflow.com/a/64033350
CSS = """
    .input-image {
        flex-grow: 1;
    }
    .output-code {
        flex-grow: 1;
        height: 0vh;
        min-height: 250px;
        scrollbar-width: thin !important;
    }
    .output-code .hide {
        display: none;
    }
    .output-code .cm-scroller {
        flex-grow: 1;
    }
    .output-code .cm-gutters {
        position: relative !important;
    }
    .output-image {
        flex-grow: 1;
        height: 0vh;
        min-height: 250px;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }
    .output-image .image-container, .output-image .grid-container {
       width: 100%;
       height: 100%;
    }
    .output-image .thumbnail-item img {
        object-fit: contain;
    }
    .output-image .grid-wrap.fixed-height {
        max-height: 100% !important;
    }
    .outputs .tabs {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .outputs .tabitem[style="display: block;"] {
        flex-grow: 1;
        display: flex !important;
    }
    .outputs .gap {
        flex-grow: 1;
    }
    .outputs .form {
        flex-grow: 1 !important;
    }
    .outputs .form > :last-child{
        flex-grow: 1;
    }
"""

# (Ab)use an invisible fake button with id preview-close to propagate the
# actual press of the button that closes a preview
# https://github.com/gradio-app/gradio/issues/6697
GALLERY_DESELECT_HACK = """
<script>
    const observerOptions = {
      childList: true,
      subtree: true
    };

    const observer = new MutationObserver((mutationsList, observer) => {
      for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          for (let node of mutation.removedNodes) {
            if (node.nodeName == "BUTTON" && node.classList.contains('preview')) {
              document.getElementById('preview-close').click();
            }
          }
        }
      }
    });

    observer.observe(document.body, observerOptions);
</script>
"""
